<template>
    <div class="screen-recorder" v-if="show">
        <!-- 第一部分：确认录制 -->
        <div class="record-confirm" v-if="isConfirming">
            <div>
                <label for="save-location">选择录制文件保存地址：</label>
                <input type="text" id="save-location" placeholder="C:\Users\39571\Videos" />
            </div>
            <div class="record-confirm">
                <label for="quality">选择录制的品质高低：</label>
                <select id="quality">
                    <option value="low">低</option>
                    <option value="medium" selected>中</option>
                    <option value="high">高</option>
                </select>
            </div>
            <div class="record-confirm">
                <span>开始录制时会通知所有成员,请确认</span>
                <button @click="startRecording">开始录制</button>
            </div>
        </div>

        <!-- 第二部分：提醒所有成员录制开始并确认 -->
        <div class="recording-alert" v-if="isRecording">
            <p>此课堂正在录制中，如果留在课堂中，表示你同意录制</p>
            <button @click="confirmRecording">知道了</button>
        </div>
    </div>
    <!-- 第三部分：录制开始之后在页面左上角显示暂停录制的按钮 -->
    <div class="pause-button" v-if="stopRecording" @click="pauseRecording">
        <img src="../../assets/class/暂停录制.png">
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useWebsocket } from "../../hooks";
import store from '@/store';

const isRecording = ref(false)
const isConfirming = ref(false)
const stopRecording = ref(false)
const show = ref(false)
const socket = useWebsocket(handelMessage); //连接socket
const userData = store.state.userData;
const roomData = store.state.roomData;

const showRecord = () => {
    isConfirming.value = true
    show.value = true
}

//开始录制
const startRecording = () => {
    //关闭确认录制
    isConfirming.value = false
    show.value = false
    stopRecording.value = true
    //向所有成员发送开始录制信息
    socket.send(JSON.stringify({
        userId: userData.userId,
        roomId: roomData.roomId,
        type: 'startRecord'
    }))
}

const confirmRecording = () => {
    isRecording.value = false
    show.value = false
}

const pauseRecording = () => {
    stopRecording.value = false
    //向所有成员发送停止录制信息
    socket.send(JSON.stringify({
        userId: userData.userId,
        roomId: roomData.roomId,
        type: 'stopRecord'
    }))
}

function handelMessage(event) {
    const data = JSON.parse(event.data);
    //防止用户重复收到消息
    if (userData.userId == data.userId) {
        return;
    }
    // console.log("socket发送的" + data.type, data);
    switch (data.type) {
        case 'startRecord':
            //开提醒
            show.value = true;
            isRecording.value = true;
            //默认其他成员无法关闭录制
            // stopRecording.value = true;
            break;
        case 'stopRecord':
            console.log('录制已结束！')
            break;
    }
}

defineExpose({
    showRecord,
});
</script>

<style scoped>
.screen-recorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 12rem;
    width: 25rem;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 4px 6px gray;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000000000;
}

.record-confirm {
    margin: 10px 0 10px 0;
}

.pause-button {
    background-color: white;
    box-shadow: 0px 2px 3px gray;
    height: 3.125rem;
    width: 3.125rem;
    border-radius: 100%;
    position: absolute;
    left: 4.6875rem;
    top: 5.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 11;
}

.pause-button img {
    height: 2.5rem;
    width: 2.5rem;
}

.recording-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

input[type="text"],
input[type="file"],
select {
    border: 1px solid #ccc;
    /* 根据你的需求设置边框样式 */
    border-radius: 4px;
    /* 可选：添加边框圆角 */
    padding: 5px;
    /* 可选：添加内边距，使文本和边框之间有一些空间 */
}
</style>